<template>
  <div>
    <van-skeleton title avatar :row="3" :loading="loading">
      <van-nav-bar title="分类" left-arrow @click-left="onClickLeft" />
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading1"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-tree-select
            v-model:main-active-index="activeIndex"
            height="90vh"
            :items="items"
          >
            <template #content>
              <router-link to="/xq">
                <div v-if="activeIndex === 0">
                  <van-grid :gutter="10">
                    <van-grid-item
                      v-for="value in list"
                      :key="value"
                      icon="photo-o"
                      :text="value.title"
                    />
                  </van-grid>
                </div>
              </router-link>
              <div v-if="activeIndex === 1">
                <van-grid :gutter="10">
                  <van-grid-item
                    v-for="value in 8"
                    :key="value"
                    icon="photo-o"
                    text="文字"
                  />
                </van-grid>
              </div>

              <van-image
                v-if="activeIndex === 1"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
              />
            </template>
          </van-tree-select>
        </van-list>
      </van-pull-refresh>
    </van-skeleton>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";

//骨架屏
const loading = ref(true);

onMounted(() => {
  setInterval(() => {
    loading.value = false;
  }, 1000);
});

const activeIndex = ref(0);
activeIndex;
const items = [
  { text: "护肤" },
  { text: "彩妆" },
  { text: "个人护理" },
  { text: "保健品" },
  { text: "母婴" },
  { text: "包包" },
  { text: "配饰" },
  { text: "服装" },
  { text: "内衣家居服" },
  { text: "鞋底" },
  { text: "家居" },
  { text: "家电数码" },
  { text: "美食" },
];

const list = ref([]);
import axios from "axios";

// const list = ref([]);
const loading1 = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    axios.get("/getshoplist").then((resp) => {
      console.log(123, resp);
      list.value = list.value.concat(resp.data.list);
    });
    loading1.value = false;

    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading1 设置为 true，表示处于加载状态
  loading1.value = true;
  onLoad();
};
</script>
<style lang='scss' scoped>
a {
  color: #000;
}
</style>